<template>
	<view>
		<view class="title">{{cate_name}}  </view>
		<!-- <view :style="[getStyle]">1212</view> -->
		<view :style="[$func.bg('ketingchangjing.png')]" class="bg"></view>
		<view class="area01" @click="setPoint"></view>
		<view class="area02" :style="[getStyle]" ref="rectangle"></view>
		<view class="people" :class="[fall?'fall':'']" :style="{
			left:people.x+'px',
			top:people.y+'px',
		}"></view>




	</view>


</template>

<script>
	const screenWidth = uni.getSystemInfoSync().screenWidth
	const pxToRpx = (px) => {
		const screenWidth = uni.getSystemInfoSync().screenWidth
		return (750 * Number.parseInt(px)) / screenWidth
	}
	const rpxToPx = (rpx) => {
		const screenWidth = uni.getSystemInfoSync().screenWidth
		return (screenWidth * Number.parseInt(rpx)) / 750
	}
	import dyGameHandShank from '@/components/dy-game-hand-shank/index'
	export default {
		components: { dyGameHandShank },
		props:{
			cate_name:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				fall: false,
				timer: null,

				people: {
					x: rpxToPx(370),
					y: rpxToPx(1100),
				},
				options: {
					direction: 0,
					opacity: .3,
					opacityActive: .7,
				},
				touchAreaStyle: { // 触摸区域样式
					background: 'rgba(255,0,0,0)',
					position: 'absolute',
					left: '20px',
					// right: '0',
					bottom: '20px',
				},
				corona: { // 轮盘
					r: 100,
					x: 100,
					y: 100,
				},
				joystick: { // 操纵杆
					r: 60,
				},
				isWalking: false,
				irregularShape: [
					{ x: 230, y: 60 },
					{ x: 430, y: 210 },
					{ x: 480, y: 190 },
					{ x: 520, y: 240 },
					{ x: 520, y: 300 },
					{ x: 420, y: 360 },
					{ x: 370, y: 330 },
					{ x: 270, y: 400 },
					{ x: 50, y: 280 },
					{ x: 50, y: 180 },
				],
				po: {
					x: 0,
					y: 0,
				}

			}
		},
		onLoad() {
			let _self = this;
		},
		computed: {
			getStyle() {
				var polygon = []
				for (let vo of this.irregularShape) {
					polygon.push(vo.x + "rpx " + vo.y + 'rpx')
				}

				return {
					// width: '100%',
					// height: '200rpx',
					// backgroundColor: "rgba(0,0,0,0.1)",
					clipPath: 'polygon(' + polygon.join(',') + ')'
				}

			},
		},
		watch: {

		},
		mounted() {

		},
		methods: {
			isLineIntersectingRect(x1, y1, x2, y2, rectX, rectY, rectWidth, rectHeight) {
				// Check if the line is outside the rectangle
				if (x1 > rectX + rectWidth || x2 < rectX || y1 > rectY + rectHeight || y2 < rectY) {
					return false;
				}

				// Check if the line intersects the left, right, top, or bottom side of the rectangle
				return (
					(x1 < rectX && x2 > rectX) || // Intersects left side
					(x1 < rectX + rectWidth && x2 > rectX + rectWidth) || // Intersects right side
					(y1 < rectY && y2 > rectY) || // Intersects top side
					(y1 < rectY + rectHeight && y2 > rectY + rectHeight) // Intersects bottom side
				);
			},
			setPoint(e) {

		 
				this.fall = false
				this.setCanvas(this.people, e.detail)


			},
			isLineIntersectingPath(x1, y1, x2, y2, pathPoints) {
				// 构建路径对象
				const path = new Path2D();
				path.moveTo(pathPoints[0], pathPoints[1]);
				for (let i = 2; i < pathPoints.length; i += 2) {
					path.lineTo(pathPoints[i], pathPoints[i + 1]);
				}
				path.closePath();
				console.log(wx.createCanvasContext('myCanvas', this))

				// 检查线段是否与路径相交
				return wx.createCanvasContext('myCanvas', this).isPointInPath(path, x1, y1) !== wx
					.createCanvasContext('myCanvas', this).isPointInPath(path, x2, y2);
			},

			setCanvas(lineStartStr, lineEndStr) {
				// 计算两条线段的交点
				const getLineIntersection = (l1p1, l1p2, l2p1, l2p2) => {
					const denominator = ((l2p2.y - l2p1.y) * (l1p2.x - l1p1.x)) - ((l2p2.x - l2p1.x) * (l1p2.y -
						l1p1
						.y));

					if (denominator === 0) {
						// 线段平行，没有交点
						return null;
					}

					const ua = (((l2p2.x - l2p1.x) * (l1p1.y - l2p1.y)) - ((l2p2.y - l2p1.y) * (l1p1.x - l2p1
							.x))) /
						denominator;
					const ub = (((l1p2.x - l1p1.x) * (l1p1.y - l2p1.y)) - ((l1p2.y - l1p1.y) * (l1p1.x - l2p1
							.x))) /
						denominator;

					if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
						const x = l1p1.x + (ua * (l1p2.x - l1p1.x));
						const y = l1p1.y + (ua * (l1p2.y - l1p1.y));
						return { x, y };
					}

					// 线段不相交
					return null;
				}


				const calculateDistance = (x1, y1, x2, y2) => {
					const deltaX = x2 - x1;
					const deltaY = y2 - y1;
					const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
					return distance;
				}
				// 寻找不规则区域与线的交点的函数
				const findIntersection = (shape, lineStart, lineEnd) => {
					var points = []

					for (let i = 0; i < shape.length; i++) {
						const p1 = shape[i];
						const p2 = i === shape.length - 1 ? shape[0] : shape[i + 1];

						const intersection = getLineIntersection(lineStart, lineEnd, p1, p2);
						if (intersection) {
							intersection.distance = calculateDistance(lineStart.x, lineStart.y, intersection.x,
								intersection.y)
							points.push(intersection)
						}

					}

					return points;
				}
				// 定义不规则区域的顶点坐标
				var irregularShape = [...this.irregularShape]

				// 定义线的两个端点坐标
				var lineStart = {
					x: pxToRpx(lineStartStr.x),
					y: pxToRpx(lineStartStr.y) - 640
				};
				var lineEnd = {
					x: pxToRpx(lineEndStr.x),
					y: pxToRpx(lineEndStr.y) - 640
				};




				var y
				if (lineStart.y > lineEnd.y && lineStart.x < lineEnd.x) {
					console.log('tr')
					// irregularShape = [...this.irregularShape].reverse()
					y = 50
				} else if (lineStart.y > lineEnd.y && lineStart.x > lineEnd.x) {
					console.log('tl')
					y = 50
					// irregularShape = [...this.irregularShape].reverse()
				} else if (lineStart.y < lineEnd.y && lineStart.x < lineEnd.x) {
					console.log('br')
					y = -50
				} else if (lineStart.y < lineEnd.y && lineStart.x > lineEnd.x) {
					console.log('bl')
					y = -50
				}

				// 寻找不规则区域与线的交点
				const intersectionPoint = findIntersection(irregularShape, lineStart, lineEnd);
				const res = intersectionPoint.sort((a, b) => a.distance - b.distance)
				console.log('Intersection Points:', res, y);

				if (intersectionPoint[0]) {
					// this.po = intersectionPoint[0]

					this.people = {
						x: rpxToPx(intersectionPoint[0].x),
						y: rpxToPx(intersectionPoint[0].y + 640 + y)
					}
					setTimeout(() => {
						this.fall = true
					}, 2000)

				} else {
					this.po = {
						x: -100,
						y: -100
					}
					this.people = lineEndStr

				}

			},







		}
	}
</script>

<style lang="scss" scoped>
	.irregularDiv {
		width: 200px;
		height: 200px;
		background-color: lightblue;
		position: relative;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	.title {
		font-size: 44rpx;
		margin: 30rpx;
	}

	.bg {
		height: 60vh;
		background-size: contain;
		position: relative;

	}

	.area01 {
		width: 100%;
 
		position: absolute;
		top: 640rpx;
		left: 0;
		bottom: 0;
		z-index: 99;
		// transform:rotate(-55deg)
		clip-path: polygon(320rpx 0,
				100% 250rpx,
				100% 100%,
				0% 100%,
				0 200rpx,
				50rpx 180rpx,
				50rpx 280rpx,
				270rpx 400rpx,
				370rpx 330rpx,
				420rpx 360rpx,
				520rpx 300rpx,
				520rpx 240rpx,
				480rpx 190rpx,
				430rpx 210rpx,
				230rpx 60rpx,
			);
	}

	.area02 {
		width: 100%;
		position: absolute;
		top: 640rpx;
		left: 0;
		bottom: 0;
		// transform:rotate(-55deg)
		// clip-path: polygon(230rpx 60rpx,
		// 		430rpx 210rpx,
		// 		480rpx 190rpx,
		// 		520rpx 240rpx,
		// 		520rpx 300rpx,

		// 		420rpx 360rpx,
		// 		370rpx 330rpx,

		// 		270rpx 400rpx,
		// 		50rpx 280rpx,
		// 		50rpx 180rpx,
		// 	);
	}

	.people {
		position: fixed;
		background-color: aqua;
		width: 30rpx;
		height: 30rpx;
		transition-duration: 2s;

		&.fall {
			// transition-delay: 0.5s;
			background-color: red;
		}
	}

	.po {
		position: absolute;
		background-color: aqua;
		width: 10px;
		height: 10px;
	}
</style>